<template>
	<div class="insert_div">
		
		<div class="bottom_div">
			<!-- 搜索结果 -->
			<div v-for="friend in friendList" class="user_cls">
				<div style="width: 100%; display: flex; margin-left: 20px; align-items: center;">
					<el-image class="header_cls2" :src="$.getImg(friend.header)" fit="cover"></el-image>
					<div style="display: flex;flex-direction: column; align-items: flex-start; margin-left: 20px; justify-content: space-evenly; height: 100%;">
						<span>{{friend.nickname}}</span>
					</div>
				</div>
				<div style="display: flex; flex-direction: row-reverse;">
					<el-button style="margin-right: 20px;" type="danger" size="small" @click="goChatPage(friend.fid)">发送消息</el-button>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultHeader: require("@/assets/header.png"),
				//申请者列表
				friendList:[],
				//表单参数
				form: {
				}
			}
		},
		methods: {
			//查询我的好友
			queryMyFriends(){
				this.$.ajax({
					url: "/friendRelation/friendList",
					success: (data) => {
						this.friendList = data;
						
						//将好友列表的信息，缓存到本地
						this.$.saveFriendsList(this.friendList);
					}
				});
			},
			//去到聊天的页面
			goChatPage(fid){
				this.$router.push("/Message/" + fid);
			}
		},
		mounted(){
			//页面加载时，就查询我的好友
			this.queryMyFriends();
		}
	}
</script>

<style>
	.insert_div {
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.bottom_div {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 20px;
	}
	
	.user_cls {
		width: 30%;
		height: 150px;
		margin: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.header_cls2 {
		width: 80px;
		height: 80px;
		border-radius: 40px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
</style>